//左侧导航渲染
axios.get('json/a.json')
    .then(function (res) {
        tabListShow(res);
    })
    .catch(
        function (error) {
            console.log(error);
        }
    );

function tabListShow(res) {
    console.log(res);
    var tabList = res.data.data;
    console.log(tabList);
    var str = '';
    for (let i = 0; i < tabList.length; i++) {
        str +=
            '<div class="left_item">' + tabList[i].name + '</div>';

    }
    document.getElementsByClassName('left')[0].innerHTML = str
}

//图片
axios.get('json/img.json')
    .then(function (res) {
        showImg(res);
    })
    .catch(function (error) {
        console.log(error);
    })

//轮播图
function showImg(res) {
    var imgList = res.data.data;
    var str = '';
    for (let i = 0; i < imgList.length; i++) {
        str += '<img class="b" src="' + imgList[i].url + '" alt="">';
    }
    document.getElementsByClassName('imgs')[0].innerHTML = str;

    getDot();
    function getDot() {
        var dotLength = res.data.data.length;
        var str = '';
        for (let i = 0; i < dotLength; i++) {
            if (i===0) {
                str += '<div class="dot active"></div>';//给第一个添加选中状态
            }else{
                str += '<div class="dot"></div>';
            }
        }
        document.getElementsByClassName('dots')[0].innerHTML = str;
    }


    var index = 0;//初始化图片
    var timer=null;
    var imgHtml = document.getElementsByClassName('b');
    for (let i = 0; i < imgHtml.length; i++) {
        if (index === i) {
            imgHtml[i].computedStyleMap.opacity = 1;
        } else {
            imgHtml[i].computedStyleMap.opacity = 0;
        }
    }

    //图片轮播
    imgAuto();
    function imgAuto() {
        timer = setInterval(function () {
            index++;
            imgShow();
        }, 1000);
    }

    //更换图片
    function imgShow() {
        if (index < 0) {
            index = imgHtml.length - 1;
        }
        if (index > imgHtml.length - 1) {
            index = 0;
        }

        for (let i = 0; i < imgHtml.length; i++) {
            imgHtml[i].style.opacity = 0;
        }
        imgHtml[index].style.opacity = 1;
        dotStateChange();
    }


    //圆点的选中状态切换
    function dotStateChange() {
        var dot = document.getElementsByClassName('dot');
    for (let i = 0; i < dot.length; i++) {
        dot[i].classList.remove('active'); 
    }
    dot[index].classList.add('active');
    }

    //上一张切换
    var xiangzuo=document.getElementsByClassName('xiangzuo')[0];
    xiangzuo.onclick=function () {
        index--;
        imgShow();
    };

    //下一张切换
    var xiangyou=document.getElementsByClassName('xiangyou')[0];
    xiangyou.onclick=function () {
        index++;
        imgShow();
    };

    //圆点的点点击切换
    var dot=document.getElementsByClassName('dot');
    for (let i = 0; i < dot.length; i++) {
        dot[i].onclick=function () {
            index=i;
            imgShow();
        };
    }

    //上一张的鼠标交互
    xiangzuo.addEventListener('mouseover',function () {
        clearInterval(timer);
    });
    xiangzuo.addEventListener('mouseout',function () {
        imgAuto();
    });

    //下一张的鼠标交互
    xiangyou.addEventListener('mouseover',function () {
        clearInterval(timer);
    });
    xiangyou.addEventListener('mouseout',function () {
        imgAuto();
    });
}